<html>
	<head>
		<title>nTube.</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=1.5" />
		<meta name="ntube-ui-version" value="1.5-tv" />
		<meta name="description" content="nTube for Internet-enabled (botnet) devices." />
		<meta charset="UTF-8" />
		<meta name="theme-color" content="#111111" />
		<link rel="manifest" href="/manifest.json" />
		<style>
			html {
				--root-background-color: #111111;
				--root-color: white;
				--root-font: "SF Pro Display", "HarmonyOS Sans", sans-serif;
				--flat-box-border: 1px solid rgba(255, 255, 255, 0.2);
				--flat-box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08);
			}
			* {
				font-synthesis: none;
				-moz-font-feature-settings: "kern";
				/* letter-spacing: -.021em */
			}
			head,
			body {
				color: var(--root-color, #333333);
				background-color: var(--root-background-color, white);
				font-family: var(--root-font, "'SF Pro Display', 'HarmonyOS Sans', sans-serif");
			}
			.poly-item {
				padding-left: 5px;
				box-shadow: var(--flat-box-shadow, "0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08)");
				border: var(--flat-box-border, "1px solid rgba(255, 255, 255, 0.2)");
				margin-bottom: 10px;
			}
			.nlang-string {
				content: "";
			}
			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid rgba(68, 68, 68, 0.875);
				background-color: #111111;
				margin-right: 0px;
				margin-left: -1px;
				z-index: 15;
			}
			.font-very-large {
				font-size: 48px;
			}
			.bold-text {
				font-weight: bold;
			}
			.user-verified {
				color: lightgreen;
				font-weight: bolder;
				font-size: large;
			}
			.small-margins {
				margin-top: 5px;
				margin-bottom: 5px;
			}
			.outlined {
				text-shadow: -1.1px -1.1px 0 #000, 1.1px -1.1px 0 #000, -1.1px 1.1px 0 #000, 1.1px 1.1px 0 #000;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../../resources/base.css" />
		<script src="../../resources/libWeb.js"></script>
		<script src="../../resources/base.js"></script>
		<script src="../../resources/lang.js"></script>
		<script src="ntube_ui_global.js"></script>
	</head>
	<body style="padding: 0px; margin: 0px">
		<!-- TODO: Remove pointer-events from below. -->
		<div style="position: fixed; top: 0px; left: 0px; z-index: 2; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.32)">
			<div id="-ui-system-video-player-section" style="position: fixed; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%">
				<!-- TODO: Remove controls=true -->
				<video id="-ui-system-video-player-main" controls="true" controller="true" autoplay playsinline="true" preload="auto" mediagroup="__nplayernx_compat" style="width: 100%; height: 100%; background-color: black">
					Video support missing, not good.
				</video>
			</div>
			<div style="position: fixed; z-index: 2; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none">
				<div id="-ui-system-video-top-section" style="margin: 5vh">
					<h1 id="-ui-system-video-title" class="small-margins outlined">VIDEO_TITLE</h1>
					<h3 id="-ui-system-video-author" class="small-margins outlined">VIDEO_AUTHOR</h3>
				</div>
				<div id="-ui-system-video-bottom-section"></div>
			</div>
		</div>
		<div style="position: fixed; top: 0px; left: 0px; z-index: 1; width: 111.4px; height: 100%; background-color: #222; border-right: 1px solid #333" tv-ui-ident="system-menu">
			<center>
				<h1><span style="color: red">n</span><span style="color: rgb(92, 250, 158)">Tube</span>.</h1>
				<p style="font-family: monospace">
					<span id="-system-ui-version" title="UI Version">1.5.7-tv-ui</span> <br />
					<span id="-system-api-version" title="nTube API Version">1.6.10</span>
				</p>
				<button id="-system-ui-home-buttom-menu">
					<img class="bold-text" src="" alt="Home." style="font-size: x-large" role="button" />
				</button>
				<button id="-system-ui-search-buttom-menu">
					<img class="bold-text" src="" alt="Search." style="font-size: x-large" role="button" />
				</button>
				<button id="-system-ui-about-buttom-menu">
					<img class="bold-text" src="" alt="About." style="font-size: x-large" role="button" />
				</button>
			</center>
		</div>
		<div style="margin-left: 121px" tv-ui-ident="system-ui">
			<div id="-ui-section-home">
				<noscript>
					<div class="poly-item" style="margin-top: 5px; margin-right: 5px; border: 1px solid rgba(255, 166, 0, 0.466)">
						<h2>JavaScript/ECMAScript missing!</h2>
						<p>nTube's TVUI requires Javascript to get anything working.</p>
					</div>
				</noscript>
				<h1 class="font-very-large nlang-string small-margins" ntube-lang-fallback="Ready for action." ntube-lang-key="ntube.lang.ready_action"></h1>
				<h2 class="nlang-string" ntube-lang-fallback="Trending." ntube-lang-key="ntube.lang.trending">Trending.</h2>
				<style>
					.trending-div {
						text-align: left;
						padding-left: 5px;
					}
					.trending-link {
						color: inherit;
						text-decoration: none;
					}
					.trending-img {
						width: 160px;
						height: 90px;
						display: inline-block;
						vertical-align: middle;
					}
				</style>
				<center id="trending-items" style="margin-bottom: 5px; margin-right: 5px"></center>
			</div>
			<div id="-ui-section-about" style="display: none; visibility: hidden">
				<noscript>
					<div class="poly-item" style="margin-top: 5px; margin-right: 5px; border: 1px solid rgba(255, 166, 0, 0.466)">
						<h2>JavaScript/ECMAScript missing!</h2>
						<p>nTube's TVUI requires Javascript to get anything working.</p>
					</div>
				</noscript>
				<h2 class="nlang-string" ntube-lang-fallback="About." ntube-lang-key="ntube.lang.trending">About.</h2>
				<center>
					<p class="small-margins">Running on <span id="-ui-system-about-user-agent">${window.navigator.userAgent}</span>.</p>
				</center>
				<h2 class="nlang-string" ntube-lang-fallback="Environment." ntube-lang-key="ntube.lang.environment">Environment.</h2>
				<div>
					<div class="flex_display" style="padding-left: 15px; padding-right: 15px">
						<h3 class="flex_one_compat" style="margin-bottom: 5px; margin-top: 5px">ECMAScript Support</h3>
						<h3 class="flex_one_compat" id="_js_supported" style="color: red; margin-bottom: 5px; text-align: right; margin-top: 5px">UNSUPPORTED</h3>
					</div>
					<div class="flex_display" style="padding-left: 15px; padding-right: 15px">
						<h3 class="flex_one_compat" style="margin-bottom: 5px; margin-top: 5px">Cookie Support</h3>
						<h3 class="flex_one_compat" id="_ck_supported" style="color: red; margin-bottom: 5px; text-align: right; margin-top: 5px">UNSUPPORTED</h3>
					</div>
					<div class="flex_display" style="padding-left: 15px; padding-right: 15px">
						<h3 class="flex_one_compat" style="margin-bottom: 5px; margin-top: 5px">HTML5 Video Support</h3>
						<h3 class="flex_one_compat" id="_vid_supported" style="color: red; margin-bottom: 5px; text-align: right; margin-top: 5px">UNSUPPORTED</h3>
					</div>
					<div class="flex_display" style="padding-left: 15px; padding-right: 15px">
						<h3 class="flex_one_compat" style="margin-bottom: 10px; margin-top: 5px">LocalStorage Support&nbsp;<span style="color: darkgray">(optional)</span></h3>
						<h3 class="flex_one_compat" id="_ls_supported" style="color: red; margin-bottom: 10px; text-align: right; margin-top: 5px">UNSUPPORTED</h3>
					</div>
				</div>
			</div>
		</div>
		<script>
			try {
				nTubeTV.init();
				nTubeLocale.init();
			} catch (e) {
				console.error(e);
			}
		</script>
	</body>
</html>
